﻿<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/>
<title>WebClip 网络剪刀手</title>
<link rel="stylesheet" type="text/css" href="options.css"/>
<link rel="shortcut icon" href="logo_32.png" type="image/x-icon" /> 
<style type='text/css'>
	a {
		font-size: 12px;
		color: #034B81;
		text-decoration: none;
	}
	a:hover {
		text-decoration: none;
	}
	.lineBlock
	{
		margin-bottom: 3px;
		padding-bottom:3px;
	}
	.wordTitle
	{
		background-color: #F4F6FC;
		padding-bottom:3px;
		padding-top:3px;
	}
	.keyWord
	{
		display: inline;
		font-weight: bold;
		font-size: 16px;
	}
	.opBtn
	{
		display: inline;
		float: right;
		padding-left: 15px;
	}
</style>
<script type="text/javascript" src="newwords.js"></script>
<script> 
/* util script start*/
function $(element) {
  if (typeof element == 'string')
   return document.getElementById(element);
}
function GetGroupValue(groupName){
	var group=document.getElementsByName(groupName);
	if(!group)
		return null;
	for(var i=0;i<group.length;i++){
		if(group[i].checked)
			return group[i].value;
	}
	return null;
}
/*
hide=function(element) {
  $(element).style.display = 'none';
  return element;
}

show=function(element) {
  $(element).style.display = '';
  return element;
}
*/
Date.prototype.format = function(format)  
{  
   var o = {  
     "M+" : this.getMonth()+1, //month  
     "d+" : this.getDate(),    //day  
     "h+" : this.getHours(),   //hour  
     "m+" : this.getMinutes(), //minute  
     "s+" : this.getSeconds(), //second  
     "q+" : Math.floor((this.getMonth()+3)/3), //quarter  
     "S" : this.getMilliseconds() //millisecond  
   }  
   if(/(y+)/.test(format)) format=format.replace(RegExp.$1,  
     (this.getFullYear()+"").substr(4 - RegExp.$1.length));  
   for(var k in o)if(new RegExp("("+ k +")").test(format))  
     format = format.replace(RegExp.$1,  
       RegExp.$1.length==1 ? o[k] :   
         ("00"+ o[k]).substr((""+ o[k]).length));  
   return format;  
} 
/* util script end*/

var currentpage = 0;
var PAGE_SIZE=7;
var db=new DB_article();

window.onload = function(){
	db.init();
	ShowPage(currentpage);
} 

function SetOrder(){
	ShowPage(currentpage);
}

function GetPageCount(fun){
	db.GetTotalCount(function(result){
						var itemcount = result;
						if(itemcount<=0)
						{
							fun(0);
						}
						var flr = Math.floor(itemcount/PAGE_SIZE);
						if(0==itemcount%PAGE_SIZE)
						{
							flr -= 1;
						}
						fun(flr);
					}
	)
}

function RemoveWord(id){
	//Debug("Remove:id:"+id);
	var p=document.getElementById("div_words");
	var div=document.getElementById(id);
	p.removeChild(div);
	db.DeleteArticle(div.idArticle);
	ShowPage(currentpage);
}

function ListWordPageList(pageIndex){
	var orderKey=GetGroupValue("rdOrderKey");
	orderKey=orderKey?orderKey:"addTime";
	var order=GetGroupValue("rdOrder");
	order=order?order:"desc";

	document.getElementById("div_words").innerHTML = "";
	db.GetRows(pageIndex,PAGE_SIZE,orderKey,order,function(rs){
						//Debug('add');
						if(!rs)
							return;
						//var reg = new RegExp(rs.title,"gim");	
						var div = document.createElement("div");
						var sourceDiv='';
						var sen='';
						if(rs.pageUrl && rs.pageUrl.indexOf('http')==0)//取词的来源可能不是普通Web页面.
							sourceDiv='<div class="opBtn"><a href="'+rs.pageUrl+'" title="转到来源网页" target="_blank"><image src="go.png"></a></div>';
						sen=rs.body;
						div.id = "div_newword_" + rs.id;
						div.idArticle = rs.id;
						div.className="lineBlock";
						div.innerHTML='<div class="wordTitle">'
											+'<div class="keyWord">'+rs.title+'</div>'
											+sourceDiv
											+'<div class="opBtn"><a title="删除" onclick=\'RemoveWord("'+div.id+'")\' href="#"><image src="del.png"></a></div>'
											+'<div class="opBtn">'+new Date(rs.addTime).format("yyyy/MM/dd hh:mm")+'</div>'
										+'</div>'
										+'<div style="font-size:13px;"><pre>'+sen+'</pre></div>';
						$("div_words").appendChild(div);	
						//var arr=div.getElementsByTagName("div");
						//if(arr.length>0){
						//	arr[arr.length-1].onclick();
						//}
					}
				);
}

function ShowPage(i){
	GetPageCount(function(result){
					//Debug(result);
					if(result<i)
						return;
					document.getElementById("itemcount").innerHTML = (result+1) + "页之" + (i+1);
					ListWordPageList(i);
				}
	)
}

function ShowPrevPage(){
	if(currentpage>0){
		currentpage--;
		ShowPage(currentpage);
	}
}

function ShowNextPage(){
	GetPageCount(function(result){
		var nextpage=currentpage+1;
		if(nextpage<=result){
			currentpage++;
			ShowPage(currentpage);
		}
		}
	);	
}

function Debug(str){
	var s=$("debug").innerHTML;
	$("debug").innerHTML=s+"<br>"+str;
}
</script>
</head>
<body>
	<div id="debug"></div>
    <div id="main_container">
        <table width="100%" valign="top">
            <tr>
                <td>
                    <h1>
                        <img src="logo.png" width="30" />WebClip 网络剪刀手</h1>
                </td>
                <td align="right">
                    <p>
                        <a href="./remember.htm" target="_blank">首页</a> | <a href="http://code.google.com/p/webclip/"
                            target="_blank">WebClip主页</a></p>
                </td>
            </tr>
        </table>
        <table cellpadding="5" class="settings-table">
            <tr>
                <td valign="top" width="75%">
                    <table width="100%">
                        <tr>
                            <td>
                            </td>
                            <td align="right">
                                <input type="button" value="上一页" onclick="ShowPrevPage()" /><input type="button" value="下一页"
                                    onclick="ShowNextPage()" />
                            </td>
                            <td align="right">
                                <div id="itemcount" align="left">
                                    共N条</div>
                            </td>
                        </tr>
                    </table>
                    <div id="div_words">
                    </div>
                </td>
            </tr>
        </table>
</body>
</html>